import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { reqgetcate } from '../../http/api'
import { Badge, SideBar } from 'antd-mobile'
// import { DemoBlock } from 'demos'
export default class Cate extends Component {
    constructor(){
        super()
        this.state={
            cates: [
 
            ],
            activeKey:""
        }
    }
    componentDidMount(){
        reqgetcate().then(res=>{
            console.log(res);
            this.setState({
                cates:res.data.list
            })
        })
    }
    cahngetabe(e){
    console.log(e);
     this.setState({
        activeKey:e
     })
    }
    render() {
        let {cates,activeKey}=this.state
        return (
            <div>
                <Header title="分类" back></Header>
          
        <div style={{ display: 'flex' }}>
          <div>
            <SideBar activeKey={activeKey} onChange={(e)=>this.cahngetabe(e)}>
              {cates.map(item => (
                <SideBar.Item key={item.id} title={item.catename} />
              ))}
            </SideBar>
          </div>
          <div>
            <div hidden={activeKey !== activeKey}>A1111</div>
            <div hidden={activeKey !== activeKey}>B</div>
            <div hidden={activeKey !== 'key3'}>C</div>
          </div>
        </div>
 
            </div>
        )
    }
}
